<!DOCTYPE html>
<html>
<head>
	<title>DOM 事件</title>
	<style type="text/css">
		div{
			padding: 10px;
			border-top: 1px solid #aaa;
			border-bottom: 1px solid #aaa;
		}
		p{
			margin: 5px;
		}
	</style>
</head>
<body onload="checkCookies()">

	<p><strong>HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。</strong></p>

	<div>
		<h3>onclick 事件</h3>
		<button onclick="displayDate()">点击这里</button>
		<p id="demo"></p>


		<h3>使用 HMTL DOM 来分配事件</h3>
		<button id="myBtn">事件分配按钮</button>
		<p id="demoTwo"></p>


		<h3>onload 和 onunload 事件</h3>
		<p>onload 和 onunload 事件会在用户进入或离开页面时被触发。</p>
		<p>onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。</p>
		<p>onload 和 onunload 事件可用于处理 cookie。</p>


		<h3>onchange 事件</h3>
		<p>onchange 事件常结合对输入字段的验证来使用。</p>
		请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
		<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>


		<h3 onmouseover="style.color = 'red';" onmouseout="style.color = 'black';">onmouseover 和 onmouseout 事件</h3>
		<p>onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。</p>
		<b>实例：</b>
		<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: green; width: 120px; height: 20px; padding: 40px; color: #fff;">把鼠标移动上面</div>


		<h3>onmousedown、onmouseup 以及 onclick 事件</h3>
		<p>onmousedown，onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。</p>
		<b>实例：</b>
		<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: green; color: #fff; width: 90px; height: 20px; padding: 40px; font-size: 12px;">请点击这里</div>

	</div>


	<script type="text/javascript" src="./EgJSWithClick.js"></script>

</body>
</html>